<!DOCTYPE html>
<html lang="zh_cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="user-scalable=no, width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
    <meta name="format-detection" content="telephone=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>惊喜砸蛋</title>
    <link rel="stylesheet" href="__CSS__style4.css?v={$version}">
    <script>
        (function (designWidth, maxWidth) {
            var doc = document,
                win = window;
            var docEl = doc.documentElement;
            var tid;
            var rootItem, rootStyle;

            function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (!maxWidth) {
                    maxWidth = 540;
                };

                if (width > maxWidth) {
                    width = maxWidth;
                }
                //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
                var rem = width * 100 / designWidth;
                //兼容UC开始
                rootStyle = "html{font-size:" + rem + 'px !important}';
                rootItem = document.getElementById('rootsize') || document.createElement("style");
                if (!document.getElementById('rootsize')) {
                    document.getElementsByTagName("head")[0].appendChild(rootItem);
                    rootItem.id = 'rootsize';
                }
                if (rootItem.styleSheet) {
                    rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
                } else {
                    try {
                        rootItem.innerHTML = rootStyle
                    } catch (f) {
                        rootItem.innerText = rootStyle
                    }
                }
                //兼容UC结束
                docEl.style.fontSize = rem + "px";
            };
            refreshRem();

            win.addEventListener("resize", function () {
                clearTimeout(tid); //防止执行两次
                tid = setTimeout(refreshRem, 300);
            }, false);

            win.addEventListener("pageshow", function (e) {
                if (e.persisted) { // 浏览器后退的时候重新计算
                    clearTimeout(tid);
                    tid = setTimeout(refreshRem, 300);
                }
            }, false);

            if (doc.readyState === "complete") {
                doc.body.style.fontSize = "16px";
            } else {
                doc.addEventListener("DOMContentLoaded", function (e) {
                    doc.body.style.fontSize = "16px";
                    if (window.innerHeight > 630) {
                        document.getElementsByClassName('page')[0].style.height = '100%';
                    }
                }, false);
            }
        })(750, 1920);
    </script>
</head>

<body>
<div class="page">
    <section class="egg-container">
        <img class="egg" src="__IMG__/img_platform@3x.png" alt="">
        <img class="egg-rift" style="display: none;" id="egg-rift" src="__IMG__/img_rift@3x.png" alt="">
        <div class="controll-part">
            <ul class="hits">
                <li class="hits-selected" data-num="1" onclick="hitsSelect(this)">砸1次</li>
                <li data-num="10" onclick="hitsSelect(this)">砸10次</li>
                <li data-num="100" class="hits-crit" onclick="hitsSelect(this)">砸100次</li>
            </ul>
            <div role="botton" class="hit-me" onclick="hitEgg(this)">点我砸金蛋</div>
            <div class="remainning-hammer">
                <img src="__IMG__/ic_hammer@3x.png" alt="">
                <span>剩余幸运锤数：</span>
                <span id="hammerNum" style="margin:0 0rem 0 0.15rem;">{$hammer.totalHammer}</span>
                <img role="botton" onclick="showModal('perchase')" style="margin-left:1em;"
                     src="__IMG__/ic_add_hammer@3x.png" alt="">
            </div>
            <!--<ul class="radios">-->
                <!--&lt;!&ndash;<li class="radio">&ndash;&gt;-->
                    <!--&lt;!&ndash;<label onclick="radioClick(this)">&ndash;&gt;-->
                        <!--&lt;!&ndash;<div class="circle checked"></div>&ndash;&gt;-->
                        <!--&lt;!&ndash;<span>不对外提示中奖信息</span>&ndash;&gt;-->
                    <!--&lt;!&ndash;</label>&ndash;&gt;-->
                <!--&lt;!&ndash;</li>&ndash;&gt;-->
                <!--<li class="radio">-->
                    <!--<label onclick="radioClick(this)">-->
                        <!--<div class="circle show"></div>-->
                        <!--<span>不显示砸中礼物弹框</span>-->
                    <!--</label>-->
                <!--</li>-->
            <!--</ul>-->
        </div>
    </section>
    <nav class="nav">
        <ul class="menu">
            <li onclick="showModal('prise')">
                <img src="__IMG__/img_zjjl@3x.png" alt="">
            </li>
            <li onclick="showModal('rank')">
                <img src="__IMG__/img_sqpm@3x.png" alt="">
            </li>
            <li onclick="showModal('giftpool')">
                <img src="__IMG__/img_bqjc@3x.png" alt="">
            </li>
        </ul>
    </nav>
    <div class="helper" onclick="showModal('help')">
        <img src="__IMG__/img_help@3x.png" alt="">
    </div>
    <div class="hammer" id="hammer">
        <img src="__IMG__/img_hammer@3x.png" alt="">
    </div>
</div>
<footer class="footer">
    <span style="color:#333534;margin-left:0.45rem;">我的钻石：</span>
    <span id="balance" style="color:#df392b;">{$hammer.total}</span>
    <a role="botton" href="rechage" class="charge" onclick="">充值</a>
</footer>
<div class="modal" style="visibility: hidden;" id="modal">
    <div class="popup" id="helper" style="display: none;">
        <div class="popup-header">
            <span>帮助</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('help')">
        <article class="article">
            <ul class="helper-ul">
                <li>
                    <span class="helper-list">1</span>
                    <span>砸蛋之前，你必须要先有幸运锤，每把幸运锤<span class="color-orange">消耗{$info.hammerPrice}钻</span>；</span>
                </li>
                <li>
                    <span class="helper-list">2</span>
                    <span>你可以一次性砸一个蛋，也可以一次性砸10个或100个；<span class="color-orange">连砸暴击</span>更容易出现超值好礼哦！</span>
                </li>
                <li>
                    <span class="helper-list">3</span>
                    <span>砸蛋中的奖品包括<span
                            class="color-orange">礼物、钻石</span>以及其他已下架或未上线礼物也会出现在我们的奖池中，一切皆有可能，期待解锁！</span>
                </li>
                <li>
                    <span class="helper-list">4</span>
                    <span>砸到礼物，会进入到您的礼物界面中的“<span class="color-orange">礼物背包</span>”中，随时可以选择送给其他人哟~</span>
                </li>
                <li>
                    <span class="helper-list">5</span>
                    {if $info.giveOpen == 'open'}
                    <span>首次充值满<span class="color-orange">{$info.givePrice}钻</span>赠送一个幸运锤!</span>
                    {else/}
                    <span>系统会不定时开启充值钻石<span class="color-orange">赠送幸运锤</span>活动</span>
                    {/if}
                </li>
                <li>
                    <span class="helper-list">6</span>
                    <span>点击查看<span class="color-orange">中奖纪录</span>，可以浏览您最近砸蛋的{$info.limit}条中奖记录；</span>
                </li>
                <li>
                    <span class="helper-list">7</span>
                    <span>砸金蛋仅为娱乐玩法，请用户理性消费；</span>
                </li>
                <li>
                    <span class="helper-list">8</span>
                    <span>本活动与苹果公司无关，官方团队保留在法律范围内对上述规则进行解释的权利。</span>
                </li>
                <li>
                    <span class="helper-list">9</span>
                    <span>本活动若出现非正当方式获取奖励的行为，一经查实将取消活动资格和待发奖励，情节严重者将被追究法律责任。</span>
                </li>
                <li>
                    <span class="helper-list">10</span>
                    <span>如有相关问题，请app内咨询客户咨询~</span>
                </li>
            </ul>
        </article>
    </div>
    <!--本期奖池-->
    <div class="popup" id="giftpool" style="display: none;">
        <div class="popup-header">
            <span>本期奖励</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('giftpool')">
        <p class="popup-message">偷偷告诉你，选择连开，</p>
        <p class="popup-message">中奖几率更大哦！</p>
        <article class="article">
            <ul class="giftpool-ul">


                {volist name="prize" id="vo" key="k"}

                <li>
                    <span class="giftpool-list">{$k}</span>
                    <img src="{$vo.img}" alt="">
                    <span>{$vo.name}
                        <!--({$vo.price}钻石)-->
                    </span>
                </li>
                {/volist}


            </ul>
        </article>
    </div>
    <!--中奖记录弹框-->
    <div class="popup" id="prise" style="display: none;">
        <div class="popup-header">
            <span>中奖记录</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('prise')">
        <!--<div>-->
            <!--<p class="popup-message">恭喜啊xxx主子！</p>-->
            <!--<p class="popup-message">你在十连砸中获得了</p>-->
        <!--</div>-->
        <article class="article">
            <ul class="giftpool-ul prise-record-ul" id="list2">


            </ul>
        </article>
    </div>
   <!--砸蛋结果弹框-->
    <div class="popup" id="prise-record" style="display: none;">
        <div class="popup-header">
            <span>砸蛋结果</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('priseRecord')">
        <div>
            <p class="popup-message">恭喜啊{$hammer.nick_name}</p>
            <p class="popup-message">主子！你在<span id="lian">十连砸</span>中获得了</p>
        </div>
        <article class="article">
            <ul class="giftpool-ul prise-record-ul" id="list">


            </ul>
        </article>
    </div>

    <!--手气排名-->
    <div class="popup" id="rank" style="display: none;">
        <div class="popup-header">
            <span>手气排名</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('rank')">
        <div class="rank-dayandweek">
            <div role="button" onclick="dayAndWeekSelect(this)" data-id="day" class="dayandweek-btn dayandweek-selected">日榜</div>
            <div role="button" onclick="dayAndWeekSelect(this)" data-id="week" class="dayandweek-btn">周榜</div>
        </div>
        <div id="day" class="dayClass">
            <div class="user">
                <div class="user-avatar">
                    <img src="{$hammer.header_img}" alt="">
                </div>
                <ul class="user-message">
                    <li>
                        <div class="user-message-label">昵称</div>
                        <div class="user-message-content">{$hammer.nick_name}</div>
                    </li>
                    <li>
                        <div class="user-message-label">当前排名</div>
                        <div class="user-message-content">{$selfDay.rank|default='未上榜'}</div>
                    </li>
                    <li>
                        <div class="user-message-label">中奖金额</div>
                        <div class="user-message-content">{$selfDay.total|default='0'}</div>
                    </li>
                </ul>
            </div>
            <article class="article" style="max-height:6.4rem;">
                <ul class="rank-ul">

                    {volist name="day" id="vo" key="k" }

                    <li>
                        <div class="rank-list">No.{$k}</div>
                        <div class="user-avatar small">
                            <img src="{$vo.header_img}" alt="">
                        </div>
                        <div class="rank-list-message">
                            <div>{$vo.nick_name}</div>
                            <div>中奖金额 | <span>{$vo.total}</span></div>
                        </div>
                    </li>
                    {/volist}

                </ul>
            </article>
        </div>
        <div id="week" class="dayClass" style="display: none">
            <div class="user">
                <div class="user-avatar">
                    <img src="{$hammer.header_img}" alt="">
                </div>
                <ul class="user-message">
                    <li>
                        <div class="user-message-label">昵称</div>
                        <div class="user-message-content">{$hammer.nick_name}</div>
                    </li>
                    <li>
                        <div class="user-message-label">当前排名</div>
                        <div class="user-message-content">{$selfWeek.rank|default='未上榜'}</div>
                    </li>
                    <li>
                        <div class="user-message-label">中奖金额</div>
                        <div class="user-message-content">{$selfWeek.total|default='0'}</div>
                    </li>
                </ul>
            </div>
            <article class="article" style="max-height:6.4rem;">
                <ul class="rank-ul">

                    {volist name="week" id="vo" key="k" }

                    <li>
                        <div class="rank-list">No.{$k}</div>
                        <div class="user-avatar small">
                            <img src="{$vo.header_img}" alt="">
                        </div>
                        <div class="rank-list-message">
                            <div>{$vo.nick_name}</div>
                            <div>中奖金额 | <span>{$vo.total}</span></div>
                        </div>
                    </li>
                    {/volist}

                </ul>
            </article>
        </div>
    </div>
    <!--锤子购买弹框-->
    <div class="popup perchase" id="perchase" style="display: none;">
        <div class="popup-header">
            <span>幸运锤购买</span>
        </div>
        <img role="close-btn" class="close-btn" src="__IMG__/ic_closed@3x.png" alt=""
             onclick="closeModal('perchase')">
        <div style="text-align:center;">
            <img class="perchase-hammer" src="__IMG__/img_hammer1@3x.png" alt="">
        </div>
        <ul class="perchase-form">
            <li>
                <div class="perchase-label">购买幸运锤个数：</div>
                <div class="perchase-content" style="-webkit-user-select:text !important;">
                    <img role="botton" onclick="perchaseNumSet(-1)" class="perchase-numbtn"
                         src="__IMG__/ic_lessnum@3x.png" alt="">
                    <!--<span class="perchase-num" id="perchase-num">10</span>-->

                    <input type="number" class="perchase-num" id="perchase-num" value="10" />

                    <img role="botton" onclick="perchaseNumSet(1)" class="perchase-numbtn"
                         src="__IMG__/ic_addnum@3x.png" alt="">
                </div>
            </li>
            <li>
                <div class="perchase-label">所需钻石数量：</div>
                <div class="perchase-content"><span id="all"></span>钻</div>
            </li>
        </ul>
        <div class="alert-btn-container" style="text-align:center;left:0.5rem;">
            <div role="botton" class="cancel" onclick="closeModal('perchase')">取消</div>
            <div role="botton" class="confirm" onclick="buyHammer()">购买</div>
        </div>
    </div>
</div>
<!--锤子为0弹框-->
<div class="modal" style="visibility: hidden;z-index: 20;" id="alert-modal">
    <div class="popup alert" id="no-hammer" style="display: none;">
        <p class="alert-title">幸运锤没有了ಥ_ಥ~</p>
        <p class="alert-content">主子~再努力一把试试, </p>
        <p class="alert-content">再砸就会有爆奖呦╰(*°▽°*)╯~YO</p>
        <div class="alert-btn-container">
            <div role="botton" class="cancel" onclick="closeAlert('noHammer')">取消</div>
            <div role="botton" class="confirm" onclick="closeAlert('noHammer');showModal('perchase');">买幸运锤</div>
        </div>
    </div>
    <div class="popup alert" id="perchase-fail" style="display: none;">
        <p class="alert-title">购买失败</p>
        <div id="error">
            <p class="alert-content">您的余额不足哦！</p>
            <p class="alert-content">充值后再来购买幸运锤吧！</p>
        </div>

        <div class="alert-btn-container">
            <div role="botton" onclick="closeAlert('perchaseFail')" class="perchase-fail-confirm">确定</div>
        </div>
    </div>
    <div class="popup alert" id="successEgg" style="display: none;">
        <p class="alert-title">砸蛋成功</p>
        <div >
            <p class="alert-content">砸蛋完成</p>
            <p class="alert-content">快去看看中奖记录吧！</p>
        </div>

        <div class="alert-btn-container">
            <div role="botton" onclick="closeAlert('successEgg')" class="perchase-fail-confirm">确定</div>
        </div>
    </div>

    <!--购买成功弹框-->
    <div class="popup alert" style="display: none;" id="success">
        <p class="alert-title">购买成功</p>
        <p class="alert-content">已获得<span id="num">10</span>个幸运锤!</p>
        <p class="alert-content">快来开启你的砸蛋人生吧！</p>
        <div class="alert-btn-container">
            <div role="botton" onclick="closeAlert('success')" class="perchase-fail-confirm">确定</div>
        </div>
    </div>
</div>


<script src="__JS__/jquery-2.1.0.js"></script>
<script>
    var info = {
        buyUrl:"{:url('hammer')}",
        hash:"{$token}",
        hammerPrice:"{$info.hammerPrice}",
        all:"{$info.hammerPrice*10}",
        smash:"{:url('smash')}",
        nick_name:"{$hammer.nick_name}",
        num:1,
        prise:"{:url('prise')}",
        room_id:"{:input('room_id')}",
    };


</script>
<script src="__JS__/index1.js?v={$version}"></script>
</body>

</html>